<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue';
import type { homeworkForm } from '@/api/type'
// import { useHomeworkStore } from '@/stores/homework';
import { addHomework, getHomework } from '@/api/homework';
let props = defineProps(["cid"])
let allHomework = ref<homeworkForm[]>()
const getAllHomework = async () => {
    let result = await getHomework(props.cid);
    allHomework.value = result.data
    console.log("作业", allHomework.value);
}
// 抽屉事件
const drawerVisible = ref(false);
const createEvent = () => {
    drawerVisible.value = !drawerVisible.value;
}
import { ElMessage, ElMessageBox } from 'element-plus';
import { useUserStore } from '@/stores/user';
import moment from 'moment';
import { useRouter } from 'vue-router';
// 新建作业
let newHomework = ref<homeworkForm>({});
function submitHomework() {
    ElMessageBox.confirm(`确认创建么？`)
        .then(async () => {
            newHomework.value.cid = props.cid
            newHomework.value.userId = useUserStore().userInfo.id;
            //时间格式设置
            let formattedDate = moment(newHomework.value.dueDate).format("YYYY-MM-DD HH:mm:ss")
            newHomework.value.dueDate = formattedDate;
            //添加
            let result = await addHomework(newHomework.value);
            ElMessage.success(result.data)

            drawerVisible.value = !drawerVisible.value
            window.location.reload();
        })
        .catch(() => {
            console.error();
        })
}
const router = useRouter();
const handleHomework = (id: number, title: string) => {
    router.push({
        name: "submission",
        query: {
            id: id,
            title: title
        }
    });
}
onMounted(() => {
    getAllHomework();
})
//挂载完成
</script>
<template>
    <div class="main">
        <el-button @click="createEvent">添加作业</el-button>
        <el-table :data="allHomework" stripe style="width: 90%">
            <el-table-column label="序号" width="100">
                <template v-slot="{ $index }">
                    {{ $index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="作业标题" width="" style="cursor: pointer;">
                <template v-slot="{ row }">
                    <span @click="handleHomework(row.id, row.title)" style="cursor: pointer;">
                        {{ row.title }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="dueDate" label="截止日期" width="180" />
            <el-table-column label="创建人" width="180">
                <template v-slot="{ row }">
                    {{ useUserStore().userInfo.name }}
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-drawer v-model="drawerVisible" title="新布置作业" size="500px">
        <el-form :model="newHomework" label-width="80px">
            <el-form-item label="作业标题">
                <el-input v-model="newHomework.title"></el-input>
            </el-form-item>
            <el-form-item label="内容说明">
                <el-input type="textarea" v-model="newHomework.content"></el-input>
            </el-form-item>
            <el-form-item label="截止日期">
                <el-date-picker v-model="newHomework.dueDate" type="datetime"></el-date-picker>
            </el-form-item>
        </el-form>

        <el-button type="primary" @click="submitHomework">确认布置</el-button>
    </el-drawer>

</template>

<style scoped>
.main {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
</style>
